<template>
  <div class="page bgc-fff">
    <x-header title="修改密码"></x-header>
    <!-- title -->
    <!--<div class="mt46 title-wrap pad-t30 f16 c-333">-->
      <!--修改密码-->
    <!--</div>-->
    <!-- input查询 -->
    <div class='login-input-wrap' style="padding-top: .45rem">
      <!-- <input type="hidden" name="_csrf" id="order_csrf" value="<?php //echo Yii::$app->request->csrfToken?>"/> -->
      <div class="login-input-box">
        <div class="input-cells mt10">
          <div class="f-fl input-label w90">旧的密码</div>
          <input type="password" class="cell-input "   placeholder="请输入旧密码"
            style="text-align:left;"  maxlength="20"  v-model.trim="registParam.oldPwd"  />
        </div>
        <div class="input-cells mt10">
          <div class="f-fl input-label w90">新的密码</div>
          <input type="password" class="cell-input "   placeholder="请输入新密码"
            style="text-align:left;"  maxlength="20"  v-model.trim="registParam.newPwd"  />
        </div>
        <div class="input-cells mt10">
          <div class="f-fl input-label w90">确认密码</div>
          <input type="password" class=" cell-input"   placeholder="请确认新密码"
            style="text-align:left;" maxlength="20"  v-model.trim="registParam.newPwds"  />
        </div>
      </div>
      <div>
        <p class="large-btn" :disabled="disabled"
          :class="[{'bgc-7cbdff':!disabled}]" @click="subRevisePwd">提交</p>
      </div>
    </div>
    <!-- loading -->
    <v-loading  v-show="loadingShow"></v-loading>
  </div>
</template>

<script type="text/ecmascript-6">
import Loading from '@/components/common/loading/loading.vue'
import { Toast } from 'mint-ui'
import { XHeader } from 'vux'
import * as AccountApi from '@/api/account'
import * as ThreeStorage from '@/utils/store/token.js'
export default {
  name: 'me-updatePassword',
  data() {
    return {
      userKey: '', // 单点登录账号
      accountId: '', // 单点登录账号标示
      registParam: {
        oldPwd: '',
        oldPwds: '',
        newPwds: '',
        newPwd: ''
      },
      disabled: true,
      loadingShow: false // loading显隐
    }
  },
  components: {
    XHeader,
    'v-loading': Loading
  },
  created() {
    const res_account_id = ThreeStorage.getAccountId()
    this.accountId = res_account_id
    console.log('res_account_id', res_account_id)
  },
  mounted() {

  },
  computed: {
    registParamCom() {
      const { newPwds, newPwd, oldPwd } = this.registParam
      return {
        oldPwd, newPwd, newPwds
      }
    }
  },
  watch: {
    registParamCom: {
      handler: function(newValData) {
        const that = this
        const vala = newValData.newPwd
        const valb = newValData.newPwd.length
        const valc = newValData.newPwds
        const vald = newValData.newPwds.length
        const vale = newValData.oldPwd
        const valf = newValData.oldPwd.length
        if (vala !== '' && valb !== '' && vala === valc && valb > 5 && vale !== '' && valf > 5) {
          that.disabled = false
        } else {
          that.disabled = true
        }
        if (valb > 20 && vald > 20) {
          Toast({
            message: '请输入6-20位的密码',
            duration: 1500
          })
        }
      },
      deep: true
    }
  },
  methods: {
    subRevisePwd: function() {
      const check_res = this.checkParam(this.registParam)
      if (this.disabled) {
        return
      }
      if (check_res) {
        this.loadingShow = true
        const formData = new FormData()
        formData.append('accountId', this.accountId)
        formData.append('oldPassword', this.registParam.oldPwd)
        formData.append('password', this.registParam.newPwd)
        AccountApi.getUpdatePassword(formData).then(res => {
          console.log('getUpdatePassword', res)
          if (res.status === 200) {
            if (res.data.code === 0) {
              this.loadingShow = false
              Toast({
                message: '密码修改成功！',
                duration: 1000
              })
              setTimeout(() => {
                this.$store.dispatch('FedLogOut')
              }, 1100)
            } else if (res.data.code === -1) {
              this.loadingShow = false
              Toast({
                message: res.message || '账号不存在！',
                duration: 1500
              })
            } else if (res.data.code === -2) {
              this.loadingShow = false
              Toast({
                message: res.message || '原密码有误，请重新输入！',
                duration: 1500
              })
            } else if (res.data.code === -3) {
              this.loadingShow = false
              Toast({
                message: res.message || '更新操作失败！',
                duration: 1500
              })
            } else if (res.data.code === -4) {
              this.loadingShow = false
              Toast({
                message: res.message || '系统繁忙,修改失败！',
                duration: 1500
              })
            }
          }
        }).catch(res => {
          this.loadingShow = false
          console.warn('error', res)
        })
      }
    },
    checkParam: function(params) {
      const { newPwds, newPwd, oldPwd } = params
      if (newPwd === '') {
        Toast({
          message: '请输入您的新密码！',
          duration: 1500
        })
        return
      }
      if (newPwds === '') {
        Toast({
          message: '请确认您的新密码！',
          duration: 1500
        })
        return
      }
      const oldPwd_res = oldPwd.length
      if (oldPwd_res < 6 || oldPwd_res > 20) {
        Toast({
          message: '请输入6-20位旧密码！',
          duration: 1500
        })
        return
      }
      const password_res = newPwd.length
      if (password_res < 6 || password_res > 20) {
        Toast({
          message: '请输入6-20位新密码！',
          duration: 1500
        })
        return
      }
      if (oldPwd === newPwd) {
        Toast({
          message: '新密码不能与旧密码相同',
          duration: 1500
        })
        return
      }
      if (newPwd !== newPwds) {
        Toast({
          message: '新密码二次输入不一致！',
          duration: 1500
        })
        return
      }
      return true
    }
  }
}
</script>

<style scoped>
@import '../../styles/util.css';
@import '../../styles/login_regist.css';
.input-label.w90{
  text-align: center;
  width: .9rem;
}
</style>
